{% extends "layout.html" %}
{% block body %}


<div id="chat-container">
    <div id="header">
        <h2>智能聊天机器人</h2>
        <div id="config-info">
            <!-- <select id="model">
                <option value="">deepseek-chat</option>
                <option value="">chatg-chat</option>
            </select> -->
        </div>
    </div>

    <div id="messages">
        <div class="msg bot">
            <div class="msg-content">
                <div class="sender">AI助手</div>
                你好！我是智能聊天机器人，有什么可以帮助你的吗？
            </div>
        </div>
    </div>

    <div id="input-area">
        <label for="user-input"></label>
        <input type="text" id="user-input" placeholder="请输入你的问题..." maxlength="1000" />
        <div class="button-group">
            <button id="send-btn" onclick="sendMessage()">发送</button>
            <button id="clear-btn" onclick="clearChat()">清空</button>
        </div>
    </div>
</div>


<script>

    let conversationHistory = [];
    let isWaiting = false;

     // 页面加载完成后获取配置信息
    document.addEventListener('DOMContentLoaded', function () {
        loadConfig();
        
        // 回车发送消息
        $(window).keydown(function(event){
            if(event.keyCode == 13)  sendMessage()
        })
    })


    // 获取后台配置信息
    function loadConfig()
    {   
        fetch("/config", {
            method: 'post',
        })
        .then((res) => res.json())
        .then((data) =>{
            $("#config-info").text(`模型： ${data.model} | API: ${data.base_url ? '已配置' : '未配置'}`)
        })
        .catch((err) =>{
            console.log('获取配置失败:', err);
        })
    }

    // 发送消息
    function sendMessage()
    {
        if(isWaiting) return;

        const input = document.getElementById("user-input");
        // 去除两端空格
        const msg = input.value.trim()
        
        if(!msg)
        {
            input.focus();
            alert('发送的消息不能为空!');
            return false;
        }

        // 添加用户消息
        addMessage("你", msg, 'user');

        // 添加到对话历史
        conversationHistory.push({
            role: "user",
            content: msg
        })

        // 清空输入框并禁用发送按钮
        input.value = '';
        setWaiting(true)
 
        // 添加加载指示器
        const loadingMsg = addMessage("AI助手", '<div class="loading"></div> 正在思考...', "bot")

        //发起接口请求
        fetch("/chat", {
            method: 'post',
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({
                message: msg,
                history: conversationHistory.slice(-10)  // 只发送最近10轮对话
            })
        })
        .then((res) => res.json())
        .then((data) =>{
            // 移除加载指示器
            // loadingMsg.remove();
            $("#messages .msg").last().remove()
            if(data.err)
            {
                addMessage("系统", data.response, "bot error");
            }
            else
            {
                addMessage("AI助手", data.response, "bot");
                conversationHistory.push({
                    role: "assistant",
                    content: data.response
                })
            }
            setWaiting(false)
        })
        .catch((err) =>{
            console.log('发送消息失败:', err);
            // loadingMsg.remove();
            $("#messages .msg").last().remove()
            addMessage("系统", "抱歉，网络连接出现问题，请稍后再试。", "bot error");
            setWaiting(false);
        })

    }

    // 添加消息
    function addMessage(sender, text, cls)
    {
        // const msgDiv = document.createElement("div");
        // // split 字符串转数组，获取数组的第一个元
        // msgDiv.className = "msg " + cls.split(" ")[0]

        // const contentDiv = document.createElement("div");
        // contentDiv.className = "msg-content" + (cls.includes("error") ? "error" : '')

        // const senderDiv = document.createElement("div")
        // senderDiv.className = "sender"
        // // 给div设置文本内容
        // senderDiv.innerText = sender

        // const textDiv = document.createElement("div");
        // textDiv.innerHTML = text

        // contentDiv.append(senderDiv)
        // contentDiv.append(textDiv)
        // msgDiv.append(contentDiv)

        // const messages = document.getElementById("messages")
        // messages.append(msgDiv)

        // // messages.scrollHeight  滚动条的距离
        // messages.scrollTop = messages.scrollHeight

        // return msgDiv;

        let msgclass =  "msg " + cls.split(" ")[0];
        let contentclass =  "msg-content" + (cls.includes("error") ? "error" : '')

        let str =  `
            <div class="${msgclass}">
                <div class="${contentclass}">
                    <div class="sender">${sender}</div>
                    <div>${text}</div>
                </div>
            </div>
        `
        $("#messages").append(str)

        let top = $("#messages")[0].scrollHeight
        $("#messages").scrollTop(top)

    }

    // 消息发送提示
    function setWaiting(waiting)
    {
        isWaiting = waiting;

        $("#send-btn").attr('disabled', waiting)
        $("#user-input").attr('disabled', waiting)

        waiting ?  $("#send-btn").text('发送中...') : $("#send-btn").text('发送'), $("#user-input").focus()

        // const sendBtn = document.getElementById("send-btn")
        // const input = document.getElementById("user-input");

        // sendBtn.disabled = waiting
        // input.disabled = waiting

        // if(waiting)
        // {
        //     sendBtn.innerText = "发送中..."
        // }
        // else
        // {
        //     sendBtn.innerText = "发送"
        //     input.focus()
        // }
    }

    // 清空历史聊天记录
    function clearChat()
    {
        if(confirm("确定要清空聊天记录吗?"))
        {
            // let messages = document.getElementById("messages")
            // messages.innerHTML = `
            //     <div class="msg bot">
            //         <div class="msg-content">
            //             <div class="sender">AI助手</div>
            //             你好！我是智能聊天机器人，有什么可以帮助你的吗？
            //         </div>
            //     </div>
            // `
            // conversationHistory = [];
            // document.getElementById("user-input").focus()

            $("#messages").html(`<div class="msg bot">
                    <div class="msg-content">
                        <div class="sender">AI助手</div>
                        你好！我是智能聊天机器人，有什么可以帮助你的吗？
                    </div>
                </div>`)
            conversationHistory = [];
            $("#user-input").focus()
        }
    }

</script>
{% endblock %}